<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s
        }
        .fade-enter, .fade-leave-active {
            opacity: 0
        }
    </style>
</head>
<body>
<!--声明式渲染-->
<div id="app">{{message}}</div>
<!--title属性绑定message-->
<div id="app-2">
    <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
<!--条件与循环-->
<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>
<!--过度效果-->
<div id="demo">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>
<!--循环-->
<div id="app-4">
    <ol>
        <li v-for="todo in todos">{{todo.text}}</li>
    </ol>
</div>

<!--组件-->
<div id="app-7">
    <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
    </ol>
</div>
<!--实例的生命周期：数据观测（data observer）、编译模版、挂载实例到dom-->

<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'Hello Vue!'
        }
    })

    var app2 = new Vue({
        el:"#app-2",
        data:{
            message:"页面加载于"+new Date()
        }
    })

    var app3 = new Vue({
        el:"#app-3",
        data:{
            seen:true
        }
    })

    new Vue({
        el:"#demo",
        data:{
            show:true
        }
    })

    var app4 = new Vue({
        el:"#app-4",
        data:{
            todos:[
                {text:"学习javascript"},
                {text:"学习Vue"},
                {text:"整个牛项目"}
            ]
        }
    })

//    注册组件
    Vue.component('todo-item',{
        /*
        * todo-item 组建现在接受一个
        * prop，类似于一个自定义属性
        * 这个属性名为todo
        * */
        props:["todo"],
        template:"<li>{{todo.text}}</li>"
    })
    var app7 = new Vue({
        el:"#app-7",
        data:{
            groceryList:[
                { text: '蔬菜' },
                { text: '奶酪' },
                { text: '随便其他什么人吃的东西' }
            ]
        }
    })

</script>
</body>
</html>